<template>
  <div class="addAddress">
    <form novalidate class="form">
      <md-field>
        <input-validate
          v-model="info.name"
          placeholder="请填写收货人姓名"
          v-validate="'required'"
          name="name"
          title="收货人"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as="收货人姓名"
          :error="errors.first('name')"
        >
        </input-validate>
        <input-validate
          v-model="info.mobile"
          placeholder="请填写收货人手机号码"
          v-validate="'required|mobile'"
          name="mobile"
          type="phone"
          title="手机号码"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as="收货人手机号码"
          :error="errors.first('mobile')"
        >
        </input-validate>
        <md-field-item
          title="所在地区"
          arrow="arrow-right"
          @click="show = !show"
          placeholder="请选择所在地区"
          :content="addressStr"
          solid
        ></md-field-item>
        <input-validate
          v-model="info.address"
          placeholder="街道楼牌号等"
          v-validate="'required'"
          name="address"
          title="详细信息"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as="地址详细信息"
          :error="errors.first('address')"
        >
        </input-validate>
        <md-cell-item title="设为默认地址">
          <md-switch slot="right" v-model="type" />
        </md-cell-item>
      </md-field>
      <md-button round @click="saveAddress">保存</md-button>
    </form>
    <div class="deleteAdd" @click="delAdd">删除收货地址</div>
    <md-tab-picker
      title="请选择"
      describe="请选择您所在的省份、城市、区县"
      :default-value="defaultValue"
      :data="data"
      v-model="show"
      @change="handleChange"
    />
  </div>
</template>

<script>
import {
  Dialog,
  InputItem,
  Field,
  Button,
  FieldItem,
  TabPicker,
  CellItem,
  Switch
} from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
import data from "@/tool/city";
validate.mobile("mobile", "请输入正确的手机号");
export default {
  name: "login",
  components: {
    inputValidate,
    [CellItem.name]: CellItem,
    [Switch.name]: Switch,
    [InputItem.name]: InputItem,
    [FieldItem.name]: FieldItem,
    [TabPicker.name]: TabPicker,
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      info: {
        mobile: "",
        name: "",
        address: ""
      },
      show: false,
      address: [],
      type: false,
      data: data,
      defaultValue: ["北京", "北京市", "东城区"],
      editInfo: {}
    };
  },
  computed: {
    addressStr() {
      return this.address.map(item => item.value).join(" ");
    }
  },
  methods: {
    handleChange({ options }) {
      this.address = options;
    },
    delAdd() {
      Dialog.confirm({
        title: "确认要删除该地址吗？",
        confirmText: "确定",
        onConfirm: () => {
          this.$ajax
            .post(this.$api.deleteAddress, {
              address_id: this.$route.params.id
            })
            .then(() => {
              this.$toast.succeed("删除成功");
              sessionStorage.removeItem("address");
              this.$router.go(-1);
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    },
    saveAddress() {
      this.$validator.validate().then(result => {
        if (result) {
          if (this.address.length === 0) {
            this.$toast.failed("请选择所在地区");
            return false;
          }
          let data = {
            mobile: this.info.mobile,
            name: this.info.name,
            province: this.address[0].value,
            city: this.address[1].value,
            area: this.address[2].value,
            address: this.info.address,
            type: this.type ? 1 : 2,
            address_id: this.$route.params.id
          };
          this.$ajax
            .post(this.$api.saveAddress, data)
            .then(() => {
              this.$toast.succeed("添加成功");
              sessionStorage.removeItem("address");
              this.$router.go(-1);
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    }
  },
  created() {
    let editInfo = JSON.parse(sessionStorage.getItem("address"));
    if (parseInt(this.$route.params.id) === editInfo.id) {
      this.info.name = editInfo.name;
      this.info.mobile = editInfo.mobile;
      this.info.address = editInfo.address;
      this.defaultValue = [editInfo.province, editInfo.city, editInfo.area];
      this.address = [
        { value: editInfo.province },
        { value: editInfo.city },
        { value: editInfo.area }
      ];
      this.type = editInfo.is_fault === 1 ? false : true;
    }
  }
};
</script>

<style scoped lang="stylus">
.addAddress{
  .form{
    padding 26px 23px
    background white
  }
  .deleteAdd{
    margin-top 26px
    background white
    padding 26px 23px
    color red
    font-size 24px
  }
}
</style>
